<template>
	<view class="resultWrap" :class="{winer: result === 1, looser: result === 0, drawer: result === 2}">
		<view class="victory" v-if="result===1">
			<view class="cartoon">
				<image src="https://zhiyue.insyte.cn/images/competition/result/win.gif"></image>
			</view>
			<!-- <view class="score center">{{correct1}} : {{correct2}}</view>
			<view class="title">恭喜你，获胜啦！</view> -->
		</view>
		<view class="lose" v-if="result===0">
			<view class="cartoon">
				<image src="https://zhiyue.insyte.cn/images/competition/result/lose.gif"></image>
			</view>
			<!-- <view class="score center">{{correct1}} : {{correct2}}</view>
			<view class="title">你输了，别灰心</view>
			<view class="title">下次再来，还是好汉！</view> -->
		</view>
		<view class="draw" v-if="result===2">
			<view class="cartoon">
				<image src="https://zhiyue.insyte.cn/images/competition/result/draw.gif"></image>
			</view>
			<!-- <view class="score center">{{correct1}} : {{correct2}}</view>
			<view class="title">平局收场</view>
			<view class="title">下次再来，继续加油</view> -->
		</view>
		<view class="contestant">
			<view class="leftItem contestantInfo">
				<view class="progress">{{p1}}</view>
				<view class="photo">
					<image :src="src1"></image>
					<view class="name">{{name1 || '???'}}</view>
				</view>
			</view>
			<view class="rightItem contestantInfo">
				<view class="progress">{{p2}}</view>
				<view class="photo">
					<image :src="src2"></image>
					<view class="name">{{name2 || '???'}}</view>
				</view>
			</view>
		</view>
		<view class="outcome">
			<view style="text-align: center;font-weight: bold;">得分</view>
			<view class="scoreGraph">
				<view class="score1">{{correct1}}</view>
				<view class="graphWrap">
					<view class="graph1" :style="'width:' +  rate1"></view>
					<view class="graph2" :style="'width:' +  rate2"></view>
				</view>
				<view class="score2">{{correct2}}</view>
			</view>
			<view class="txt" v-show="result === 0">没关系下次好好加油</view>
			<view class="txt" v-show="result === 1">恭喜你 获胜啦</view>
			<view class="txt" v-show="result === 2">平局 都是最棒的哦</view>
		</view>
		<!-- <cos-btn text="确定" @sure="quit"></cos-btn> -->
		<view class="decArea">
			<view class="close" @click="quit">确定</view>
			<image class="moon" src="../../static/img/test/yueliang.png"></image>
			<image class="decorate" src="../../static/img/test/decorate.png"></image>
		</view>
	</view>
</template>

<script>
	import cosBtn from '@/components/cos-btn.vue'
	export default{
		components:{
			cosBtn
		},
		props:{
			result: {
				type: Number,
				default: 1
			},
			correct1:{
				type: Number,
				default: 0
			},
			correct2:{
				type: Number,
				default: 0
			},
			src1: String,
			src2: String,
			p1: Number,
			p2: Number,
			name1: String,
			name2: String
		},
		data(){
			return{
				totalCount: 10,
				resultContext: null
			}
		},
		computed:{
			rate1(){
				if(!this.correct1){
					return '0%'
				}
				return (this.correct1 * 1) / this.totalCount * 50 + '%'
			},
			rate2(){
				if(!this.correct2){
					return '0%'
				}
				return (this.correct2 * 1) / this.totalCount * 50 + '%'
			}
		},
		mounted(){
			const source = [
				'https://zhiyue.insyte.cn/media/music/lose.mp3',
				'https://zhiyue.insyte.cn/media/music/win.mp3',
				'https://zhiyue.insyte.cn/media/music/draw.mp3',
			]
			this.resultContext = uni.createInnerAudioContext()
			this.resultContext.autoplay = true
			this.resultContext.src = source[this.result]
		},
		onUnload(){
			this.resultContext.destroy()
		},
		methods:{
			quit(){
				this.$emit('quit')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.winer{
		background-image: url('../static/img/winBack.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.looser{
		background-image: url('../static/img/loseBack.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.drawer{
		background-image: url('../static/img/drawBack.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.resultWrap{
		box-sizing: border-box;
		width: 595rpx;
		margin: 0 auto;
		position: relative;
		text-align: center;
		padding-top: 133rpx;
		padding-bottom: 25px;
		background-color: #ffffff;
		border-radius: 24rpx;
		transform: scale(0.95);
		animation: hearbeat 0.3s linear infinite alternate;
		.victory{
			.cartoon{
				width: 100%;
				text-align: center;
				position: absolute;
				// top: -396rpx;
				left: -10rpx;
				top: -350rpx;
				image{
					width: 514rpx;
					height: 437rpx;
				}
			}
		}
		.lose{
			.cartoon{
				width: 100%;
				text-align: center;
				position: absolute;
				left: 32rpx;
				top: -340rpx;
				image{
					width: 529rpx;
					height: 432rpx;
				}
			}
		}
		.draw{
			.cartoon{
				width: 100%;
				text-align: center;
				position: absolute;
				left: 0;
				top: -300rpx;
				image{
					width: 550rpx;
					height: 440rpx;
				}
			}
		}
		.title{
			color: #000000;
			font-size: 20px;
		}
	}
	.score{
		font-size: 32px;
		font-weight: bold;
		color: #ff4040;
	}
	.contestant{
		position: relative;
		height: 85rpx;
		.contestantInfo{
			box-sizing: border-box;
			position: absolute;
			top: 0;
			width:139rpx;
			height: 65rpx;
			line-height: 65rpx;;
			border: 3rpx;
			border-radius: 18rpx;
			color: #ffffff;
			font-size: 30rpx;
			background-color: #3497f5;
			.progress{
				position: absolute;
				text-align: center;
				width:79rpx;
				height: 65rpx;
				line-height: 65rpx;
				top: 0;
			}
		}
		.photo{
			position:absolute;
			top: -29rpx;
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			&::before{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(255,255,255,0.4);
				border-radius: 50%;
				widht: 124rpx;
				height: 124rpx;
			}
			&::after{
				content: '';
				position: absolute;
				left: 4rpx;
				top: 4rpx;
				background-color: rgba(255,255,255,0.7);
				border-radius: 50%;
				widht: 114rpx;
				height: 114rpx;
			}
			image{
				box-sizing: border-box;
				position: absolute;
				top: 8rpx;
				width: 101rpx;
				height: 101rpx;
				border: 4rpx solid white;
				border-radius: 50%;
				background-color: #ffffff;
				box-shadow: 0 0 0 7rpx rgba(255,255,255,0.4);
			}
			.name{
				box-sizing: border-box;
				position: absolute;
				width: 138rpx;
				height: 48rpx;
				line-height: 48rpx;
				border: 2rpx solid white;
				border-radius: 8rpx;
				background-color: #ffc81a;
				font-size: 25rpx;
				text-align: center;
				top: 128rpx;
				box-shadow: 0 0 0 7rpx rgba(255,255,255,0.4);
			}
		}
		.leftItem{
			left:105rpx;
			.progress{
				right: 0;
			}
			.photo{
				left: -81rpx;
				image{
					left: 8rpx;
				}
				.name{
					left: 0;
				}
			}
			
		}
		.rightItem{
			right: 105rpx;
			background-color: #f2731d;
			.progress{
				left: 0;
			}
			.photo{
				right: -81rpx;
				image{
					right: 8rpx;
				}
				.name{
					right: 0;
				}
			}
		}
	}
	.outcome{
		margin-top: 16rpx;
		color: #4cb5f6;
		font-size: 40rpx;
		.scoreGraph{
			position: relative;
			height: 44rpx;
			margin-top: 40rpx;
			.score1{
				font-weight: bold;
				position: absolute;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				left: 0;
				top: 0;
			}
			.graphWrap{
				box-sizing: border-box;
				position: absolute;
				width: 450rpx;
				height: 58rpx;
				left: 76rpx;
				top: 0;
				border-radius: 22rpx;
				border: 9rpx solid transparent;
				background-color: rgba(52,151,245, 0.25);
				.graph1{
					position: absolute;
					top: 0;
					width: 0rpx;
					height: 40rpx;
					border-top-left-radius: 22rpx;
					border-bottom-left-radius: 22rpx;
					border-right: 1px solid #ffffff;
					right: 50%;
					background-color: #f2731d;
					transition: width 1.5s;
				}
				.graph2{
					position: absolute;
					top: 0;
					width: 0rpx;
					height: 40rpx;
					border-left: 1px solid #ffffff;
					border-top-right-radius: 22rpx;
					border-bottom-right-radius: 22rpx;
					left: 50%;
					background-color: #3497f5;
					transition: width 1.5s;
				}
			}
			.score2{
				font-weight: bold;
				position: absolute;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				right: 0;
				top: 0;
			}
		}
		.txt{
			margin-top: 20px;
			padding: 0 60rpx;
			font-weight: bold;
		}
	}
	.decArea{
		width: 366rpx;
		height: 90rpx;
		margin: 20px auto;
		position: relative;
		.close{
			width: 366rpx;
			height: 90rpx;
			text-align: center;
			font-size: 42rpx;
			color: #ffffff;
			margin: 0 auto;
			line-height: 90rpx;
			border-radius: 34rpx;
			background-color: #2ca1ff;
			background-image: url('/static/imgV1.5/test/reflectLight.png');
			background-repeat: no-repeat;
			background-position: 9rpx 9rpx;
			background-size: 25rpx 30rpx;
		}
		.moon{
			position: absolute;
			z-index: -1;
			right: -30rpx;
			top: -25rpx;
			width: 95rpx;
			height: 95rpx;
		}
		.decorate{
			position: absolute;
			z-index: 2;
			width: 105rpx;
			height: 120rpx;
			top: -18rpx;
			right: -20rpx;
		}
	}
	
	// @keyframes hearbeat{
	// 	0%{
	// 		transform: scale(0.98);
	// 	}
	// 	100%{
	// 		transform: scale(1.02);
	// 	}
	// }
</style>
